<template>
	<view>
		<template v-if="userList && userList.total">
			<view v-for="(item,index) in userList.data" :key="index" style="border-radius: 10px;background: linear-gradient(#dcf2e0, #ffffff);padding: 10px;margin-bottom: 10px;">
				<view class="north-container">
					<image v-if="item.avatar_img" :src="baseURL+'/'+item.avatar_img" mode="aspectFill"></image>
					<image v-else :src="baseURL+'/'+configs.logo_img" mode="aspectFill"></image>
					<view class="base-info-container">
						<view class="name">
							{{ item.nickname || item.username || item.tel }}
						</view>
						<view class="time">
							绑定时间:{{formatTime(item.agent_time)}}
						</view>
					</view>
					<view class="btn-primary" style="width: 80px;flex-shrink: 0;text-align: center;padding: 5px 10px;" @click="del(item)">解除</view>
				</view>
			</view>
		</template>
		<Empty v-else></Empty>
		
		<view class="justify-center align-center" style="position: fixed;bottom: 125px;right: 20px;height: 60px;width: 60px;">
			<button open-type="share" class="bg-color share-btn justify-center align-center" style="color: #ffffff;border-radius: 100%;padding: 5px;font-size: 16px;flex-shrink: 0;flex-grow: 0;width: 100%;height: 100%;">邀请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseURL:this.baseURL,
				userList: null,
				configs: uni.getStorageSync('configs'),
				userId: uni.getStorageSync('user_id')
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			onShareAppMessage(res) {
				let path = '/pages/index/index?share_id='+this.userId
				console.log('path',path)
				return {
				  title: '邀请您观看各种好剧！',
				  path,
				}
			},
			getData(){
				this.get('crud/list',{table: 'user', share_id: this.userId, limit:9999 }).then(({code,paginate})=>{
					if(code==1){
						this.userList = paginate
					}
				})
			},
			del(item){
				this.post('crud/save',{table: 'user', ...item, share_id: 0}).then(({code,paginate})=>{
					if(code==1){
						this.success('解绑成功')
						this.getData()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.share-btn::after{
		border: none;
		content: none;
	}
	.share-btn::before{
		content: none;
	}
	
	
.north-container {
	display: flex;
	align-items: center;
	padding-bottom: 20rpx;
	&>image {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
	}
	

	
	.base-info-container {
		flex-grow: 1;
		margin: 0rpx 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.name {
			font-size: 28rpx;
			color: $base-color;
		}
		.time {
			font-size: 24rpx;
			color: $font-color-light;
		}
	}
}
</style>
